<template>
  <div class="home">
    <el-menu :default-active="activeIndex" class="el-menu-demo" router mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">井类型</el-menu-item>
      <el-menu-item index="/AlertMessageList">告警信息</el-menu-item>
     </el-menu>
    <div class="line"></div>
        <el-row display="margin-top:10px">
        <el-input v-model="input4" placeholder="请输入用户名" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-input v-model="input5" placeholder="请输入密码" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-button type="primary" @click="login()" style="float:left; margin: 2px;">登陆</el-button>
    </el-row>
    <div class="line"></div>
    <el-row display="margin-top:10px">
        <el-input v-model="input1" placeholder="请输入井类型编号" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-input v-model="input2" placeholder="请输入井类型" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-input v-model="input3" placeholder="请输入井数量" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-button type="primary" @click="add_well_condition()" style="float:left; margin: 2px;">新增</el-button>
    </el-row>
    <el-row>
        <el-table :data="bookList" style="width: 100%" border>
          <el-table-column prop="id" label="编号" >
            <template slot-scope="scope"> {{ scope.row.id }} </template>
          </el-table-column>
          <el-table-column prop="book_name" label="井类型" >
            <template slot-scope="scope" @click="handleClick(scope.row)"> {{ scope.row.well_type }} </template>
          </el-table-column>
          <el-table-column prop="add_time" label="井数" >
            <template slot-scope="scope"> {{ scope.row.quantity }} </template>
          </el-table-column>
 
        </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WellCondition',
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      bookList: [],
      activeIndex: '1',
      activeIndex2: '1',
      token: '',
    }
  },
  mounted: function() {
      this.showBooks()
  },
  methods: {
     handleSelect(key, keyPath) {
      console.log(key, keyPath);

    },
    handleEdit(index, row) {
      this.$router.push('/demo')  //将你的跳转写在这里。
    },
    login(){
      let url = 'http://192.168.1.109:8000/api-token-auth/login/'
      this.$http.post(url,{username:this.input4,password: this.input5})
        .then((response) => {
          console.log(response)
            if (response.status == 200) {
              this.token = response.data.token
              console.log(this.token)
            } else {
              this.$message.error('登陆失败，请重试')
              console.log(res['msg'])
            }
        })
    },
    add_well_condition(){
      this.$http.get(this.setData.resUrl + 'add_well_condition?id=' + this.input1 + '&well_type=' + this.input2 + '&quantity='+ this.input3)
        .then((response) => {
            var res = JSON.parse(response.bodyText)
            if (res.status == 0) {
              this.showBooks()
            } else {
              this.$message.error('新增井类型失败，请重试')
              console.log(res['msg'])
            }
        })
    },
    showBooks(){
      this.$http.get(this.setData.resUrl +'/well_condition/')
        .then((response) => {
            var res = (response.body)
            // var res = JSON.parse(response.bodyText)
            console.log(res)
            if (response.status == 200) {
              this.bookList = res
            } else {
              this.$message.error('查询井类型失败')
              console.log(res['msg'])
            }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>